<template>
  <div v-if="result" class="bannerr">
    <!-- <van-icon class="revoke" name="revoke" @click="back()" /> -->
    <back></back>
    <!-- 产品详情 已完成 -->
    <van-swipe @change="onChange" style="background: #fff">
      <van-swipe-item v-for="i in Info.slider_image.length" :key="i"
        ><img :src="Info.slider_image[i - 1]"
      /></van-swipe-item>
      <div
        class="custom-indicator"
        slot="indicator"
        style="background: #ffffff50"
      >
        {{ current + 1 }}/{{ Info.slider_image.length }}
      </div>
    </van-swipe>
    <div class="start">
      <div class="head">
        <span style="color: red"
          >￥<b>{{ Info.price }}</b></span
        ><span style="font-size: 16px"
          >￥<b>{{ Info.vip_price }}</b></span
        ><img
          width="24"
          src=""
        />
      </div>
      <div class="bodyy">
        <div class="van-multi-ellipsis--l3">
          {{ Info.store_name }}
        </div>
      </div>
      <div class="flex">
        <span>原价：￥{{ Info.ot_price }}</span>
        <span>库存：{{ Info.stock }}{{ Info.unit_name }}</span>
        <span>销量：{{ Info.fsales }}{{ Info.unit_name }}</span>
      </div>
    </div>
    <div class="change" v-if="result.productAttr == 0 ? false : true">
      <div @click="addCart">
        <span style="color: #666; font-size: 12px">已选择: </span
        ><span>
          {{ result.productAttr[0].attr_values[0] }}
        </span>
        <span v-if="result.productAttr == 1 ? true : false"
          >,{{ result.productAttr[1].attr_values[0] }}</span
        ><van-icon name="arrow" />
      </div>
    </div>
    <div class="user">
      <span>用户评价(0)</span>
      <span class="right"
        ><b style="color: #fc4c4c">0%</b>好评率<van-icon name="arrow"
      /></span>
    </div>
    <div class="recom">
      <van-swipe class="my-swipe" indicator-color="#e93323" ref="swiper">
        <van-swipe-item>
          <router-link
            class="list"
            :to="`/detail/${result.good_list[i - 1].id}`"
            v-for="i in result.good_list.length / 3"
            :key="i"
          >
            <img :src="result.good_list[i - 1].image" />
            <span class="van-ellipsis">{{
              result.good_list[i - 1].store_name
            }}</span>
            <span style="color: #fc4141"
              >￥{{ result.good_list[i - 1].price }}</span
            >
          </router-link>
        </van-swipe-item>
        <van-swipe-item>
          <router-link
            class="list"
            :to="`/detail/${result.good_list[i + 5].id}`"
            v-for="i in result.good_list.length / 3"
            :key="i"
          >
            <img :src="result.good_list[i + 5].image" />
            <span class="van-ellipsis">{{
              result.good_list[i + 5].store_name
            }}</span>
            <span style="color: #fc4141"
              >￥{{ result.good_list[i + 5].price }}</span
            >
          </router-link>
        </van-swipe-item>
        <van-swipe-item>
          <router-link
            class="list"
            :to="`/detail/${result.good_list[i + 11].id}`"
            v-for="i in result.good_list.length / 3"
            :key="i"
          >
            <img :src="result.good_list[i + 11].image" />
            <span class="van-ellipsis">{{
              result.good_list[i + 11].store_name
            }}</span>
            <span style="color: #fc4141"
              >￥{{ result.good_list[i + 11].price }}</span
            >
          </router-link>
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="white">产品介绍</div>
    <div class="conterr" v-html="Info.description">
      <!-- {{ result.storeInfo.description }} -->
    </div>
    <!-- 购物车 -->
    <div>
      <van-goods-action>
        <van-goods-action-icon icon="service-o" text="客服" />
        <router-link to="/cart" v-if="cartItem.length">
          <van-badge
            :content="cartItem.length"
            color="var(--cy-Color)"
          >
            <van-goods-action-icon icon="cart-o" text="购物车" />
          </van-badge>
        </router-link>
        <router-link v-else  to="/cart" >
          <van-goods-action-icon icon="cart-o" text="购物车" />
        </router-link>
        <div @click="isShow = !isShow">
          <van-goods-action-icon v-if="!isShow" icon="like-o" text="收藏" />
          <van-goods-action-icon
            class="act"
            v-if="isShow"
            icon="like"
            text="已收藏"
          />
        </div>

        <van-goods-action-button
          type="warning"
          @click="addCart"
          text="加入购物车"
        />

        <!-- @click="addCart" -->
        <van-goods-action-button
          type="danger"
          @click="addCart"
          text="立即购买"
        />
      </van-goods-action>
      <van-sku
        v-model="show"
        :sku="sku"
        :goods="goods"
        :goods-id="goodsId"
        @add-cart="onAddCartClicked"
        @buy-clicked="onBuyClicked"
      >
      <div class="van-ellipsis">{{store_name}}</div>
      </van-sku>
    </div>
  </div>
</template>
<script>
import { mapMutations, mapActions } from "vuex";
import Back from "@/components/Back.vue";
export default {
  name: "Detail",
  props: {
    id: [String, Number],
    productValue: String,
    // product_id: [String, Number],
  },
  data() {
    return {
      result: null,
      current: 0,
      Info: [],
      show: false,
      isShow: false,
      store_name: "",
      sku: {
        tree: [
          // {
          //   k:"颜色",
          //   k_id:"1",
          //   v:[
          //     {
          //       id:"30349",
          //       name:"红色",
          //       imgUrl:""
          //     },
          //     {
          //       id:"1215",
          //       name:"白色",
          //       imgUrl:""
          //     }
          //   ],
          //   k_s:"s1",
          // },
        ],
        list: [
          //   {
          //     id:2259,
          //     price:120,
          //     s1:"1215",
          //     s2:"1193",
          //     stock_num:50,
          //     goods_id:946755
          //   },
        ],
        price: "",
        stock_num: 227,
        none_sku: false, //是否有规格
        hide_stock: false,
      },
      goods: {
        picture: "abfcb.jpg",
      },
      goodsId: 123,
    };
  },
  components: {
    Back,
  },
  created() {
    this.axios.get(`/product/detail/${this.id}`).then((result) => {
      this.result = result;
      console.log(result);
      this.Info = result.storeInfo;
      this.store_name = result.storeInfo.store_name;
      if (result.productAttr != 0 || result.productValue != 0) {
        let arrs = result.productAttr;
        let listValue = result.productValue;
        let id = 1;
        let idobj = {};
        let ssk = 1;
        // let index=Number;
        this.sku.list = [];
        this.goods.picture = listValue[Object.keys(listValue)[0]].image;
        // this.goodsId=listValue[Object.keys(listValue)[idobj]].unique;
        this.sku.tree = arrs.map((atr, ads) => {
          let va = atr.attr_value.map((at, index) => {
            id++;
            idobj[at.attr] = id;

            let attrs = {
              id: id,
              name: at.attr,
            };
            if (ads < 1) {
              attrs.imgUrl = listValue[Object.keys(listValue)[index]].image;
              this.goodsId = listValue[Object.keys(listValue)[index]].unique;
              // this.goodsId = v.unique;
            }
            return attrs;
          });
          var ks = "s" + ssk;
          ssk++;
          return {
            k: atr.attr_name,
            k_id: atr.attr_name,
            v: va,
            k_s: ks,
          };
        });
        for (let key in listValue) {
          let v = listValue[key];
          let keys = key.split(",");
          this.sku.list.push({
            id: v.unique,
            price: v.price * 100,
            s1: idobj[keys[0]],
            s2: idobj[keys[1]],
            stock_num: v.stock,
            goods_id: v.product_id,
            imgUrl: v.image,
          });
          // console.log(listValue);
        }
        // console.log(listValue);
      } else {
        this.goodsId = result.storeInfo.id;
        this.goods.picture = result.storeInfo.image;
        var v = result.storeInfo;
        this.sku.list.push({
          id: v.id,
          price: v.price * 100,
          stock_num: v.stock,
          goods_id: v.product_id,
          imgUrl: v.image,
        });
      }
    });
    this.axios.get("/verify_code").then((result) => {
      console.log(result);
    });
    this.cartItem = this.$store.state.cartItem;
    console.log(this.cartItem);
  },
  compuetd: {
    cartItem() {
      return this.$store.state.cartItem;
    },
    addBuy(){
      return this.$store.state.addBuy;
    },
    addItem(){
      return this.$store.state.addItem;
    },
    ...mapMutations(["savecartlist"]),
    ...mapActions(["getcartlist"]),
  },
  methods: {
    ...mapMutations(["SaveToken"]),
    ...mapActions(["getuserInfo"]),
    onChange(index) {
      this.current = index;
    },
    addCart() {
      this.show = true;
    },
    onAddCartClicked(result) {
      console.log("获取加购物车信息==>", this.goodsId);
      console.log(result);
      this.show = false;
      this.$store.dispatch("AddcartData", result);
    },
    onBuyClicked(result) {
      // console.log("获取加购物车信息==>", result);
      this.show = false;
      this.$store.dispatch("AddData", result);
      this.$router.push({path:"/buy"});
      // if (result.selectedSkuComb.goods_id == undefined) {
      //   this.$router.push({ path: `/Order/${result.goodsId}` });
      // } else {
      //   this.$router.push({
      //     path: `/Order/${result.selectedSkuComb.goods_id}`,
      //   });
        // this.$store.dispatch("AddbuyData", result);
      // }
    },
  },
  mounted() {
    this.$store.state.cartItem.map((ele) => {
      ele.checked = false;
      if (ele.checked) {
        this.$store.state.total += ele.item.selectedSkuComb.price * ele.count;
        this.$store.state.allChecked = true;
      }
    });
    this.$store.state.addItem.map((ele) => {
        this.$store.state.UnitPrice += ele.item.selectedSkuComb.price * ele.count;
    });
  },
};
</script>
<style lang="less">
.van-badge--fixed {
height: 16px;
    line-height: 6px;
    right: 10px;
    padding: 4px;

}
.act {
  color: var(--cy-Color);
  .van-goods-action-icon__icon {
    color: var(--cy-Color);
  }
}
</style>
<style lang="less" scoped>
.bannerr {
  width: 100%;
  height: auto;
  background: #f5f5f5;
  img {
    width: 100%;
  }
  .revoke {
    position: fixed;
    z-index: 1;
    background: var(--cy-Color);
    color: rgb(255, 255, 255);
    font-size: 30px;
    padding: 10px;
    border-radius: 50%;
    margin: 5px;
  }
  .custom-indicator {
    position: absolute;
    bottom: 0;
    right: 0;
    font-size: 15px;
    background: white;
    padding: 3px 5px;
    margin: 9px;
    border-radius: 3px;
  }
}
.start {
  font-weight: bold;
  background: #fff;
  padding: 10px 0px;
  margin: 0 0 5px;
  .head {
    width: 140px;
    display: flex;
    align-items: baseline;
    img {
      height: 12px;
    }
    span {
      padding: 0 5px;
    }
    i {
      position: absolute;
      right: 20px;
      color: #666;
    }
  }
  .bodyy {
    font-size: 17px;
    padding: 0px 5px 10px;
    line-height: 20px;
  }
  .flex {
    font-size: 13px;
    display: flex;
    justify-content: space-between;
    padding: 0 10px;
    color: #999;
    font-weight: normal;
  }
}
.change {
  background: #fff;
  padding: 10px;
  font-size: 16px;
  margin: 10px 0;
  div {
    display: flex;
    align-items: center;
    i {
      right: 15px;
      position: absolute;
      color: #666;
    }
  }
}
.user {
  background: #fff;
  padding: 10px;
  font-size: 16px;
  margin: 10px 0;
  .right {
    right: 30px;
    position: absolute;
    color: #666;
    i {
      right: -20px;
    }
  }
}
.recom {
  .my-swipe {
    padding-bottom: 30px;
    .van-swipe__indicator {
      background-color: #000000;
    }
    .van-swipe-item {
      display: flex;
      flex-wrap: wrap;
      .list {
        color: #000;
        width: 32%;
        overflow: hidden;
        margin: 2px;
        img {
          width: 100%;
          height: 150px;
        }
        span {
          font-size: 14px;
        }
      }
    }
  }
}
.white {
  text-align: center;
  margin: 2px 0;
  padding: 10px 0;
  font-size: 20px;
  background: #ffffff;
}
.conterr {
  width: 100% !important;
  font-size: 12px;
  color: #666;
  background: #f5f5f5;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: baseline;
  align-content: stretch;
  flex-wrap: nowrap;
  p {
    height: 100%;
  }
  // img {
  //   width: 100vw;
  // }
}
</style>